<template>
  <el-row class="h100">
    <el-col class="h100" :span="12">
      <div class="h100" ref="echartsMapRef"></div>
    </el-col>
    <el-col class="h100" :span="12">
      <MyMap>
        <MapTdtLayer url="http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}"></MapTdtLayer>
        <MapSupermapLayer
          url="http://123.127.160.203:8091/iserver/services/map-nercita_cloud/rest/maps/hlj_ctpf_all?prjCoordSys={epsgCode:4326}"
        ></MapSupermapLayer>
      </MyMap>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { MyMap, MapTdtLayer, MapSupermapLayer } from '@/map/index';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const echartsMapRef = ref();

const initChart = () => {
  const XData = ['有机质', '有效磷', '速效钾', '有效锌', '有效氮', '水溶态硼', '缓效钾', '有效硅', '有效锰'];
  const chart = echarts.init(echartsMapRef.value);

  const colors = ['#79A7D0', '#F4AE7F', '#C0A5D5'];
  const option = {
    color: colors,
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 0,
      containLabel: true,
    },
    legend: {},
    xAxis: {
      type: 'category',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: XData,
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '全局异常点数',
        stack: '总量',
        barMaxWidth: 35,
        barGap: '10%',
        data: [120, 200, 150, 80, 70, 110, 130, 200, 150],
        type: 'bar',
      },
      {
        name: '局部异常点(HL)',
        stack: '总量',
        data: [120, 200, 150, 80, 70, 110, 130, 200, 150],
        type: 'bar',
      },
      {
        name: '局部异常点(LH)数',
        stack: '总量',
        data: [120, 200, 150, 80, 70, 110, 130, 200, 150],
        type: 'bar',
      },
    ],
  };
  chart.setOption(option);
};

onMounted(() => {
  initChart();
});
</script>
